<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="../js/jquery-3.6.0.min.js" type="text/javascript"></script>

    <script type="text/javascript">

      $(function (){

            $("#add").click(function (){
                var grey = $("<li>grey</li>");

                // $("ul")
                //     .append(grey);

                // grey.appendTo("ul");



                // $("ul")
                //     .prepend(grey);

                // grey.prependTo("ul");


            })

          var text = $("#text");
          text.click(function (){
              alert("text");
          })


          $("#delete").click(function (){

              // text.remove();

              text.detach();

          })

          $("#reverse").click(function (){
              text.appendTo("body");
          })

          $("#empty").click(function (){
              $("ul").empty();
          })


          $("ul li").click(function (){
              $(this)
                  .clone(true)
                  .appendTo("ul");
          })


          $("#replace").click(function (){

              var black = $("<li>black</li>");

              // $("ul li:odd").replaceWith(black);

              black.replaceAll($("ul li:odd"));

          })


          $("#outer").click(function (){
              // $("ul").wrap("<div class='d'></div>");
              $("ul").wrapAll("<div class='d'></div>");
          })

      })

    </script>
</head>
<body>


    <ul>
        <li>red</li>
        <li>green</li>
        <li>blue</li>
        <li>yellow</li>
        <li>gold</li>
    </ul>


    <ul>
        <li>red</li>
        <li>green</li>
        <li>blue</li>
        <li>yellow</li>
        <li>gold</li>
    </ul>

    <p id="text">文本</p>

    <input type="button" value="添加标签" id="add"/>
    <input type="button" value="删除标签" id="delete"/>
    <input type="button" value="删除还原标签" id="reverse"/>
    <input type="button" value="清空标签" id="empty"/>
    <input type="button" value="替换" id="replace"/>
    <input type="button" value="包裹" id="outer"/>



</body>
</html>